<template>
  <div class="switch-box switch">
    <input type="checkbox" :id="name" />
    <input type="hidden" :name="name" :value="selectedValue" />
  </div>
</template>

<script>
  export default {
    props: {
      name: {
        type: String,
        default: "switch",
      },
      value: {
        default: "1",
      },
      onValue: {
        default: "1",
      },
      offValue: {
        default: "-1",
      },
      onText: {
        type: String,
        default: "是",
      },
      offText: {
        type: String,
        default: "否",
      },
    },
    data() {
      return {
        selectedValue: this.value
      }
    },
    mounted: function () {
      $("#" + this.name).bootstrapSwitch({
        onText: this.onText,
        offText: this.offText,
        onColor: "primary",
        offColor: "default",
        state: this.value === this.onValue,
        onSwitchChange: (event, state) => {
          if (state === true) {
            this.selectedValue = this.onValue;
          } else {
            this.selectedValue = this.offValue;
          }
        },
      });
    }
  }
</script>